<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>底部菜单栏</title>
    <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body, html{
            background-color: #34495e;
            width: 100%;
            height: 100%;
            font-family: sans-serif;
            overflow: hidden;
        }
        .desc{
            width: 680px;
            margin: 300px auto;
            color: white;
            text-align: justify;
        }
        .desc h1{
            text-transform: uppercase;
            margin: 12px 0;
        }
        .desc p {
            font-size: 18px;
        }
        .btnm{
            position: fixed;
            bottom: 16px;
            cursor: pointer;
            left: 50%;
            transform: translateX(-50%);
            z-index: 100;
        }
        .btnm span{
            width: 60px;
            height: 4px;
            display: block;
            background-color: white;
            margin: 8px;
            transition: 0.4s all;
        }
        .btnn span{
            background-color: #34495e;
        }
        .menu{
            background-color: #2980b9;
            height: 0;
            width: 100%;
            position: fixed;
            bottom: 0;
            transition: 0.4s all;
            text-align: center;
        }
        .menu a{
            width: 80px;
            display: inline-block;
            margin:0 10px;
            color: white;
            cursor: pointer;
            line-height: 80px;
            font-size: 50px;
        }
        .menu .l1{
            margin-right: 70px;
        }
        .menu .l2{
            margin-left: 70px;
        }
        a:hover{
            opacity: 0.8;
        }
        .show{
            height: 80px;
        }
    </style>
</head>
<body>
    <div class="desc">
        <h1>Menu Navigation with cool hover</h1>
        <p>Lorem lpsum is simply dummy text of the printing and typesetting industry. Lorem lpsum is simply dummy text of the printing and typesetting industry. Lorem lpsum is simply dummy text of the printing and typesetting industry. Lorem lpsum is simply dummy text of the printing and typesetting industry.</p>
    </div>
    <a class="btnm">
        <span></span>
        <span></span>
        <span></span>
    </a>
    <div class="menu">
        <a class="ion-document"></a>
        <a class="ion-trash-a"></a>
        <a class="l1 ion-folder"></a>
        <a class="l2 ion-calendar"></a>
        <a class="ion-locked"></a>
        <a class="ion-chatbox-working"></a>
    </div>
</body>
<script src="jquery-3.3.1.min.js"></script>
<script>
    $(function () {
        $('.btnm').on('click', function () {
            $('.btnm').toggleClass('btnn');
            $('.menu').toggleClass('show')
        })
    })
</script>
</html>